<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-08-06 08:31:02
 * @LastEditTime: 2024-03-29 11:26:18
 * @FilePath: \client\src\pages\files\list.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<div class="bg-white m-2 p-2 rounded flex-1" v-if="isLoad">
		<div class="flex p-2 border-b items-center">
			<div class="flex flex-1 space-x-2">
				<ypupload ref="uploader">
					<button
						class="rounded-sm bg-gray-600 flex items-center py-1.5 px-3 text-white text-xs hover:bg-red-700"
						id="ypupload"
					>
						<i class="ri-upload-2-line ri-lg pr-1"></i>本地上传
					</button>
				</ypupload>
				<button
					class="rounded-sm bg-gray-600 flex items-center py-1.5 px-3 text-white text-xs hover:bg-red-700"
					@click="openRemoteBox = true"
				>
					<i class="ri-download-cloud-line ri-lg pr-1"></i>远程保存
				</button>
				<template v-if="selectIds.length">
					<button
						class="rounded-sm bg-gray-600 flex items-center py-1.5 px-3 text-white text-xs hover:bg-red-700"
						@click="destory"
					>
						<i class="ri-delete-bin-6-line ri-lg pr-1"></i>删除选中
					</button>
					<button
						v-if="selectIds.length && ['image'].includes(searchData.ftype)"
						class="rounded-sm bg-gray-600 flex items-center py-1.5 px-3 text-white text-xs hover:bg-red-700"
						@click="handlePreview"
					>
						<i class="ri-eye-line ri-lg pr-1"></i>预览
					</button>
				</template>
			</div>
			<div class="flex space-x-2">
				<ypselect
					v-model="searchData.ftype"
					:itemList="ftype_list"
					:clearable="false"
					defaultTitle="--请选择类型--"
				></ypselect>
				<div class="hidden md:block">
					<ypinput v-model="searchData.keywords" placeholder="关键词"></ypinput>
				</div>
				<button
					class="rounded-sm bg-gray-600 flex items-center py-2 px-2 text-white text-xs hover:bg-red-700"
					@click="search"
				>
					<i class="ri-search-line ri-lg"></i>
				</button>
			</div>
		</div>

		<div class="p-2" v-if="readyList.length">
			<div class="grid grid-cols-10 gap-5 mb-3">
				<template v-for="(item, index) in readyList" :key="index">
					<div
						class="h-32 overflow-hidden border relative text-center"
						:class="item.status == 1 ? 'border-gray-500' : 'border-red-500'"
					>
						<img
							class="h-full mx-auto"
							:src="item.src"
							:title="item.name"
							v-if="item.type.indexOf('image') >= 0"
						/>
						<div
							class="text-pink-800"
							v-else-if="item.type.indexOf('zip') >= 0 || item.type.indexOf('x-compressed') >= 0"
						>
							<i class="ri-folder-zip-line ri-2x"></i>
						</div>
						<div class="text-blue-700" v-else-if="item.type.indexOf('word') >= 0">
							<i class="ri-file-word-2-line ri-2x"></i>
						</div>
						<div class="text-green-700" v-else-if="item.type.indexOf('sheet') >= 0">
							<i class="ri-file-excel-2-line ri-2x"></i>
						</div>
						<div class="text-rose-500" v-else-if="item.type.indexOf('powerpoint') >= 0">
							<i class="ri-file-ppt-2-line ri-2x"></i>
						</div>
						<div class="text-gray-600" v-else-if="item.type.indexOf('text/plain') >= 0">
							<i class="ri-article-line ri-2x"></i>
						</div>
						<div class="text-red-600" v-else-if="item.type.indexOf('pdf') >= 0">
							<i class="ri-file-pdf-line ri-2x"></i>
						</div>
						<div class="text-purple-600" v-else-if="item.type.indexOf('audio') >= 0">
							<i class="ri-music-2-line ri-2x"></i>
						</div>
						<div class="text-indigo-700" v-else-if="item.type.indexOf('video') >= 0">
							<i class="ri-video-line ri-2x"></i>
						</div>
						<div class="text-pink-500" v-else>
							<i class="ri-file-line ri-2x"></i>
						</div>
						<div class="text-xs truncate absolute bottom-0 inset-x-0 bg-white bg-opacity-80 py-1">
							{{ item.name }}
						</div>
						<div
							class="w-5 h-5 absolute right-1 top-1 text-red-500 rounded-full bg-white z-10"
							@click="uploader.removeFile(item.id)"
							v-if="item.status == 0"
						>
							<i class="ri-close-circle-fill ri-lg"></i>
						</div>
						<div
							class="w-1/3 h-1/3 bg-black opacity-60 text-white flex items-center justify-center rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
							v-if="item.status < 2"
						>
							{{ item.progress }}%
						</div>
					</div>
				</template>
			</div>
			<div class="mb-3">
				<button class="btn btn-lan" @click="onUpload">开始上传</button>
			</div>
		</div>
		<div class="flex flex-row mt-5 bg-gray-50 p-5">
			<div class="flex-1">
				<div class="grid grid-cols-10 gap-2">
					<div v-for="(item, index) in dataList" class="border border-dashed">
						<div
							class="relative flex justify-center items-center overflow-hidden h-36"
							:key="index"
							@click="toggle(item.id)"
						>
							<ypimage v-if="item.ftype.indexOf('image') >= 0" :src="item.filepath"></ypimage>
							<div class="text-pink-800" v-else-if="item.ftype.indexOf('attachment') >= 0">
								<i class="ri-folder-zip-line ri-2x"></i>
							</div>
							<div class="text-blue-700" v-else-if="item.name.indexOf('docx') >= 0">
								<i class="ri-file-word-2-line ri-2x"></i>
							</div>
							<div class="text-green-700" v-else-if="item.name.indexOf('xlsx') >= 0">
								<i class="ri-file-excel-2-line ri-2x"></i>
							</div>
							<div class="text-rose-500" v-else-if="item.name.indexOf('ppt') >= 0">
								<i class="ri-file-ppt-2-line ri-2x"></i>
							</div>
							<div class="text-gray-600" v-else-if="item.name.indexOf('text/plain') >= 0">
								<i class="ri-article-line ri-2x"></i>
							</div>
							<div class="text-red-600" v-else-if="item.name.indexOf('pdf') >= 0">
								<i class="ri-file-pdf-line ri-2x"></i>
							</div>
							<div class="text-purple-600" v-else-if="item.name.indexOf('audio') >= 0">
								<i class="ri-music-2-line ri-2x"></i>
							</div>
							<div class="text-indigo-700" v-else-if="item.name.indexOf('video') >= 0">
								<i class="ri-video-line ri-2x"></i>
							</div>
							<div class="text-pink-500" v-else>
								<i class="ri-file-line ri-2x"></i>
							</div>

							<div
								class="-right-[36px] -bottom-[5px] absolute bg-blue-600 text-white w-[100px] h-[40px] flex items-center justify-center -rotate-45 z-40"
								v-show="selectIds.indexOf(item.id) >= 0"
							>
								<i class="ri-check-line ri-lg rotate-45"></i>
							</div>
						</div>
						<Infos :item="item"></Infos>
					</div>
				</div>
				<div class="mt-4" v-show="pageData.pageCount > 1">
					<yppage @topage="topage" :pageData="pageData" />
				</div>
				<div class="mb-3 text-center py-2 border-t mt-2" v-if="selectIds.length && selnum">
					<button class="btn btn-hong" @click="useFiles">确定</button>
				</div>
			</div>
		</div>
	</div>

	<teleport to="body" v-if="openRemoteBox">
		<div class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-80 z-40">
			<div class="absolute bg-white left-1/2 -translate-x-1/2 top-32 w-[750px] h-36 rounded p-3">
				<div>
					<yptextarea v-model="remoteData" placeholder="请输入远程URL"></yptextarea>
				</div>
				<div class="flex justify-center py-2 space-x-2 mt-5">
					<button class="btn btn-lan" type="button" @click="saveRemoteData">
						<i class="ri-save-line ri-lg pr-1"></i>
						提交
					</button>
					<button class="btn btn-hong" type="button" @click="openRemoteBox = false">
						<i class="ri-format-clear ri-lg pr-1"></i>
						取消
					</button>
				</div>
			</div>
		</div>
	</teleport>
</template>
<script setup>
	import { getData, postData, alter, confirms } from '@/common/base'
	import { ref, watch, provide, reactive, onMounted } from 'vue'
	import Infos from './infos.vue'
	import { imgPreview } from '@/components/utils'
	const props = defineProps({
		selnum: {
			default: 0,
			type: Number
		},
		sids: {
			default: []
		},
		isopen: {
			default: 0
		},
		ftype: {
			default: 'image'
		},
		params: {
			default: []
		}
	})
	const emits = defineEmits(['useFiles'])
	const isLoad = ref(false)
	const upload_params = reactive(props.params)
	//获取远程图片
	const openRemoteBox = ref(false)
	const remoteData = ref('')
	const saveRemoteData = async () => {
		if (remoteData.value == '') {
			alter({ type: 'alter-error', text: '请输入远程URL' })
			return
		}
		const resp = await postData('files/downloadFile', {
			str: remoteData.value,
			category_id: props.category_id,
			ypcms_type: props.ypcms_type
		})
		if (resp.code == 1) {
			getDataList()
			remoteData.value = ''
			openRemoteBox.value = false
		}
	}
	const category = ref([])

	const ftype_list = reactive([])

	//搜索
	const searchData = reactive({
		category_id: props.params.category_id || 0,
		ypcms_id: props.params.ypcms_id || 0,
		page: 0,
		ftype: props.ftype,
		keywords: ''
	})

	//监听类型更新
	watch(
		() => searchData.ftype,
		() => {
			search()
		}
	)

	//分页
	const pageData = reactive({
		totalRecords: 0, //总记录数
		pageCount: 0, //总页数
		currentPage: 1 //当前页
	})
	const topage = (page) => {
		pageData.currentPage = page
		searchData.page = page
		getDataList()
	}

	//选中
	const selectIds = reactive([])
	const useFiles = () => {
		let arr = dataList.filter((vol, key) => {
			if (selectIds.indexOf(vol.id) >= 0) {
				return true
			}
		})
		emits('useFiles', arr)
	}
	const toggle = (i) => {
		if (selectIds.indexOf(i) >= 0) {
			selectIds.splice(selectIds.indexOf(i), 1)
		} else {
			if (props.selnum == 0 || selectIds.length < props.selnum) {
				selectIds.push(i)
			} else {
				alter({ type: 'alter-error', text: '超出大最值' })
			}
		}
	}
	//上传
	const uploader = ref()
	const onUpload = () => {
		uploader.value.onupload()
	}

	const readyList = reactive([])
	provide('uploadHandle', {
		readyList: readyList,
		addFile: (obj) => {
			readyList.push(obj)
		},
		removeFile: (id) => {
			readyList.filter((val, index) => {
				if (val.id == id) {
					readyList.splice(index, 1)
				}
			})
		},
		reload: () => {
			getDataList()
		}
	})
	const dataList = reactive([])
	const search = () => {
		selectIds.length = 0
		getDataList()
	}

	const getDataList = async () => {
		readyList.length = 0
		dataList.length = 0
		const res = await getData('files/index', searchData)
		if (res.code == 1) {
			const { data, search_type_data } = res.data
			pageData.totalRecords = data.total
			pageData.pageCount = data.last_page
			data.map((item, index) => {
				dataList.push(item)
			})
			if (!ftype_list.length) {
				for (const item of search_type_data) {
					ftype_list.push(item)
				}
			}
		}
	}
	//删除
	const destory = async () => {
		confirms({ text: '确认删除吗？' })
			.then(async () => {
				const res = await postData('/files/delete', { ids: selectIds })
				if (res.code) {
					alter({ type: 'alter-success', text: res.msg })
					selectIds.length = 0
					getDataList()
				} else {
					alter({ type: 'alter-error', text: res.msg })
				}
			})
			.catch((e) => {})
	}

	// 预览
	const handlePreview = () => {
		let imgsArr = dataList.filter((vol) => selectIds.indexOf(vol.id) >= 0)
		imgsArr = imgsArr.map((v) => v.filepath)
		imgPreview(imgsArr)
	}

	onMounted(async () => {
		if (props.category_id) {
			const res = await getData('category/getDetails', {
				id: props.category_id
			})
			if (res.code == 1) {
				category.value = res.data
			}
		}
		await getDataList()
		if (props.sids) {
			Object.keys(props.sids).map((k) => {
				selectIds.push(props.sids[k])
			})
		}
		isLoad.value = true
	})
</script>
